Ext.define('FForm', {
   extend: 'Ext.window.Window' ,
   alias: 'widget.fform',
   modal: true,
   iconCls: 'fform-icon',
   closeAction: 'hide',
   
   /**
    * table: tabela do banco relacionada a este formulário.
    */
   table: '',
   
   /*
    * info: Informação relevante sobre o formulário.
    */
   info: '',
   
   /*
    * handlerUrl: URL do arquivo que irá ser utilizado para interação com o servidor.
    */  
   handlerUrl: 'src/php/handler.php',   
   
   /*
    * formFields: Array com os campos do formulário.
    */
   formFields: null,
   
   /*
    * showBBar: Boolean para mostrar ou não o rodapé. Default true.
    */
   showBBar: true,
   
   /**
     * Variável que armazena o objeto JSON das requisições AJAX.
     */
    obj: null,
   
   initComponent: function()
   {
       // Layout
       this.layout = 'vbox';
       this.layoutConfig = {
           align: 'stretch'
       };
        
       this.items = this.formFields;
       
       // Se o tamanho da janela não for definido, seta 800x600.
       this.width = this.width ? this.width : 800;
       this.height = this.height ? this.height : 600;
       
       // TODO: no rodapé informar dados do usuário, data/hora, etc.
       if ( this.showBBar )
       {
           var date = new Date();       
           
           var calendar = Ext.create('FForm', {               
               title: 'Calendário',
               width: 192,
               height: 232,
               showBBar: false,
               modal: false,
               formFields: [{                       
                       xtype: 'datepicker',
                       todayTip: 'Ir para a data atual'
               }]
           });
           
           var userInfo = Ext.create('FMessage', {
               title: 'Informação do usuário',
               msg: 'Nome: Usuário da Silva<br>Login: user<br>Logado desde: 21/12/2012 10:08'
           });
           
           this.bbar = {
               xtype: 'container',
               cls: 'bottom-bar',
               width: '100%', 
               layout: {type: 'hbox'}, 
               flex: 1, 
               items: [
                       {
                           xtype: 'label',
                           flex: this.width,
                           text: this.info
                       },
                       {
                           xtype: 'image',
                           height: 16,
                           src: 'themes/default/images/botao_users.png',
                           flex: this.width/50,
                           listeners: {
                                el: {
                                    click: function() {
                                        userInfo.show();
                                    }
                                }
                            }
                       },
                       {
                           xtype: 'label',
                           flex: this.width/8,
                           margin: '0 0 0 4',
                           text: 'Usuário',
                           listeners: {
                                el: {
                                    click: function() {
                                        userInfo.show();
                                    }
                                }
                            }
                       },
                       {
                           xtype: 'image',
                           height: 16,
                           src: 'themes/default/images/calendar.png',           
                           flex: this.width/50,
                           listeners: {
                                el: {
                                    click: function() {
                                        calendar.show();
                                    }
                                }
                            }
                       },
                       {
                           xtype: 'label',
                           flex: this.width/8,
                           margin: '0 0 0 4',
                           text: date.toLocaleDateString(),
                           listeners: {
                                el: {
                                    click: function() {
                                        calendar.show();
                                    }
                                }
                            }
                       }
                   ]
           };
       }
       
       this.callParent();
   },   
   _onBtnCloseClick: function()
   {
       this.doClose();
   }
});